<template>
  <div class="nav-menu scale-1px">
    <div class="navi">
      <img src="../../assets/fh1.png" alt="" @click="goback" />
      <span>狗眼电影</span>
    </div>
    
<div class="content">
  
  
    
      <div class="cinema" 
      v-for="item in cinemas" 
      :key="item" 
      @click="selectHomeReleaseData(id)"
      >
        <div class="title">
          <span >{{ item.nm }}</span>
          <span class="price-block">
            <span class="price">{{ item.sellPrice }}</span><span class="q">元起</span>
          </span>
        </div>
        <div class="location">
          <span class="address">{{ item.addr }}</span>
          <span class="distance">{{ item.distance }}</span>
        </div>
        <div class="label-block">
          <span class="label endorse">改签</span>
          <span class="label snack">小吃</span>
        </div>
        <div v-if="item.promotion" class="discount-block">
          <span class="discount-label-icon">卡</span>
          <span class="discount-label-text">开卡特惠，首单2张立减3元</span>
        </div>
      </div>
    </div>
  
</div>
  
</template>

<script>
    import cinemass from '../../../../dogeye/public/mock/cinemass.json';
    export default{
      data(){
        return{
          cinemas:cinemass
        }
        
      },
      
      methods:{
        selectHomeReleaseData(id){
      // const id=item.id;
      this.$router.push({
        path:`/xiangqing/${id}`,
      });
    },
        goback() {
      this.$router.go(-1);
      },
      
      
      }
    }
</script>
<style  scoped>
  .navi {
  width: 100%;
  background: orange;
  float: left;
  height: 40px;
  position: fixed;
  top: 0;
}
.navi > img {
  width: 20px;
  float: left;
  margin-top: 10px;
  margin-left: 5px;
}
.navi > span {
  float: left;
  margin: 7px 0px 0px 150px;
  color: white;
  font-size: 18px;
  
}
    .nav-menu{
      height: 44px;
    display: flex;
    background: #f5f5f5;
    }
    
    .a{text-decoration: none;}
      
    .left{
      flex: 0 0 80px;
      float: left;
      color: #666;
      line-height:44px;
      text-align: center;
    }
      .icon-xiala{
        font-size:14px;
    }
    .right{
      flex: 1;
      color: #bbb;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 28px;
      line-height: 28px;
      font-size: 13px;
      color: #b2b2b2;
      margin-left: 18px;
      border: 5px solid #e6e6e6;
      border-radius: 5px;
      margin-right: 15px;
      margin-top: 8px;
      background: #fff;
    }
    .loading{
    margin-top:12px;
    }
  .content{
    overflow-x: scroll; 
    white-space: nowrap;
    position: fixed;
    width: 100%;
    top: 96px;
    bottom: 56px;
  }
    .wrap_content{
      overflow: hidden;
      height: 100%;
    }
      .cinema{
        padding: 13px 15px 13px 0;
        margin-left: 15px;
        background-color: #fff;
        position: relative;
        overflow: hidden;
      }
        .title{
          height: 23px;
          line-height: 23px;
          font-size: 16px;
          color: #000;
        }
          .price-block{
            padding-top: 9px;
            padding-left: 3px;
            color: #ff0000;
          }
            .price{
              font-size: 18px;
            }
            .q{
              margin-left: 3px;
            }
        .location{
          margin-top: 6px;
          font-size: 13px;
          color: #666;
        }
          .distance{
            margin-left: 5px;
          }
        .label-block{
          height: 17px;
          line-height: 17px;
          margin-top: 6px;
          margin-bottom: 4px;
          overflow: hidden;
          font-size: 0;
          flex-shrink: 0;
        }
          .label{
            position: relative;
            display: inline-block;
            padding: 0 3px;
            height: 15px;
            line-height: 15px;
            border-radius: 2px;
            font-size: 12px;
            margin-right:6px;
          }
            .endorse{
              color: #589daf;
              border: 1px solid #589daf;
            }
            .snack{
              color: #f90;
              border: 1px solid #f90;
            }
        .discount-block{
          color: #999;
          margin-bottom: 4px;
        }
          .discount-label-icon{
            padding: 0 2px;
            height: 14px;
            line-height: 14px;
            border-radius: 2px;
            font-size: 12px;
            margin-right:6px;
            display: inline-block;
            color: #bbb;
            border: 1px solid #bbb;
          }
          .discount-label-text{
            margin-left: 0;
            font-size: 11px;
          }

</style>
